<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:body>
        <ui:composition template="templates/template.xhtml">
            <ui:define name="title">Gestion des promotions - Administration ShopEasy</ui:define> 
            <ui:define name="content">
                <section class="wrapper style2">
                    <div class="container">
                        <div id="content">
                            <h:form>
                                <p:growl id="messages" autoUpdate="true" />

                                <p:dataTable id="liste" var="produit" value="#{listePromotions.produitsAvecPromotion}" editable="true" sortMode="multiple"
                                             widgetVar="listeTriee" emptyMessage="Aucun résultats" filteredValue="#{listePromotions.promotionsTriees}" >
                                    <p:ajax event="rowEdit" listener="#{listePromotions.modifierPromotion}" update="liste" />

                                    <f:facet name="header">
                                        Liste des promotions
                                        <p:outputPanel>                                            
                                            <p:inputText id="globalFilter" onkeyup="PF('listeTriee').filter()" style="text-align:center;width:200px" placeholder="Recherche"/>
                                        </p:outputPanel>
                                    </f:facet>

                                    <p:column headerText="Id" sortBy="#{produit.promotion.id}" filterBy="#{produit.promotion.id}" filterStyle="display:none">                                        
                                        <h:outputText value="#{produit.promotion.id}" />
                                    </p:column>

                                    <p:column headerText="Produit" sortBy="#{produit.libelle}" filterBy="#{produit.libelle}" filterStyle="display:none"> 
                                        <h:outputText value="#{produit.libelle}" />
                                    </p:column>

                                    <p:column headerText="Type" sortBy="#{produit.promotion.type}" filterBy="#{produit.promotion.type}" filterStyle="display:none">
                                        <p:cellEditor>
                                            <f:facet name="output"><h:outputText value="#{produit.promotion.type}" /></f:facet>
                                            <f:facet name="input">
                                                <p:selectOneMenu id="typeproduit" value="#{produit.promotion.type}" required="true" requiredMessage="Le champs type est requis." 
                                                                 style="width:100%" styleClass="vertical-align">
                                                    <f:selectItem itemLabel="Choisir" />
                                                    <f:selectItem itemLabel="%" itemValue="%" />
                                                    <f:selectItem itemLabel="€" itemValue="€" />
                                                </p:selectOneMenu> 
                                            </f:facet>                                             
                                        </p:cellEditor>
                                    </p:column>

                                    <p:column headerText="Valeur" sortBy="#{produit.promotion.valeur}" filterBy="#{produit.promotion.valeur}" filterStyle="display:none">
                                        <p:cellEditor>
                                            <f:facet name="output"><h:outputText value="#{produit.promotion.valeur}" /></f:facet>
                                            <f:facet name="input">
                                                <p:inputText value="#{produit.promotion.valeur}" style="width:100%" required="true" requiredMessage="Le champs valeur est requis." 
                                                             validatorMessage="La valeur ne peut pas être inférieur à 0.01">
                                                    <f:validateDoubleRange minimum="0.01" />
                                                </p:inputText>
                                            </f:facet>
                                        </p:cellEditor>

                                    </p:column> 

                                    <p:column headerText="Quantité nécessaire" sortBy="#{produit.promotion.quantiteNecessaire}" 
                                              filterBy="#{produit.promotion.quantiteNecessaire}" filterStyle="display:none" style="width: 200px">
                                        <p:cellEditor>
                                            <f:facet name="output"><h:outputText value="#{produit.promotion.quantiteNecessaire}" /></f:facet>
                                            <f:facet name="input">
                                                <p:inputText value="#{produit.promotion.quantiteNecessaire}" required="true" requiredMessage="Le champs quantité est requis."
                                                             validatorMessage="La quantité ne peut pas être inférieur à 1" style="width:95%;" type="number" >                                                    
                                                    <f:validateLongRange minimum="1" />
                                                </p:inputText>                                                
                                            </f:facet>
                                        </p:cellEditor>                                                                               
                                    </p:column>

                                    <p:column headerText="Modifier" style="width: 70px;" styleClass="ui-icon-center" >
                                        <p:rowEditor />                                       
                                    </p:column>

                                    <p:column headerText="Supprimer" style="width:100px; text-align: center">
                                        <p:commandButton icon="ui-icon-trash" title="Supprimer" actionListener="#{listePromotions.supprimerPromotion(produit.promotion.id)}" update="liste" process="@this" >
                                            <p:confirm header="Confirmation" message="Voulez-vous supprimer cette promotion ?" icon="ui-icon-alert" />
                                        </p:commandButton>  
                                    </p:column>                                    
                                </p:dataTable>

                                <p:confirmDialog global="true" showEffect="clip">
                                    <p:commandButton value="Oui" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
                                    <p:commandButton value="Non" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
                                </p:confirmDialog>
                            </h:form>
                        </div>
                    </div>
                </section>                
            </ui:define>
        </ui:composition>
    </h:body>
</html>